<style lang="scss" scoped>
.view_1 {
    font-size: 0.8rem;
    margin-top: 1rem;
    .time_box {
        display: flex;
        .list {
            padding: 0.2rem 0.4rem;
            background-color: #fff;
            border-radius: 0.3rem;
            border: #fff solid 0.1rem;
            margin-right: 0.4rem;
        }
        .listactive {
            border: #fa924d solid 0.1rem;
            color: #fa924d;
        }
    }
    .navflters {
        margin: 0.8rem 0;
        display: flex;
        justify-content: space-between;
        .left {
            background-color: #fff;
            border-radius: 0.4rem;
            padding: 0 0.4rem;
            height: 38px;
            line-height: 38px;
            display: flex;
            align-items: center;
            .text {
                margin: 0 0.4rem;
            }
            image {
                width: 1rem;
            }
        }
        .right {
            width: 12rem;
        }
    }
    .swiperbox {
        height: 35rem;
        .swiperA {
            .top {
                position: relative;
                .image {
                    width: 100%;
                    height: 15rem !important;
                }
                .swiperA_content {
                    z-index: 2;
                    height: 100%;
                    width: 100%;
                    position: absolute;
                    top: 0;
                    left: 0;
                    padding: 0 1rem;
                    box-sizing: border-box;
                    .name {
                        margin-top: 0.2rem;
                        width: 100%;
                        text-align: center;
                        color: #f6aa60;
                        font-size: 0.8rem;
                    }
                    .button {
                        display: flex;
                        justify-content: space-between;
                        .button_btn {
                            width: 4rem;
                            background-color: #e5495f;
                            font-size: 0.8rem;
                            padding: 0.2rem 0.4rem;
                            border-radius: 0.5rem;
                            text-align: center;
                            color: #fff;
                        }
                    }
                    .footer {
                        position: absolute;
                        bottom: 1rem;
                        left: 0;
                        width: 100%;
                        padding: 0 1rem;
                        color: #fff;
                        .footer_list {
                            display: flex;
                            justify-content: space-between;
                            .left,
                            .right {
                                width: 48%;
                                .div {
                                    background-color: #ffffff33;
                                    border-radius: 0.8rem;
                                    padding: 0.5rem;
                                    display: flex;
                                    .a,
                                    .b {
                                        flex: 1;
                                        text-align: center;
                                        .num {
                                            font-size: 1rem;
                                            font-weight: 600;
                                        }
                                    }
                                }
                            }
                        }
                        .footer_list1 {
                            display: flex;
                            justify-content: space-between;
                            .left,
                            .center,
                            .right {
                                width: 30%;
                                text-align: center;
                                background-color: #ffffff33;
                                border-radius: 0.8em;
                                padding: 0.5rem;
                                .num {
                                    font-size: 1rem;
                                    font-weight: 600;
                                }
                            }
                        }

                        .title {
                            font-size: 0.9rem;
                            margin: 0.2rem 0;
                            display: flex;
                            align-items: flex-end;
                            image {
                                width: 1rem;
                                margin: 0 0.2rem;
                            }
                        }
                    }
                }
            }
        }
        .swiperB {
            .top {
                position: relative;
                .image {
                    width: 100%;
                    height: 20rem !important;
                }
                .swiperB_content {
                    z-index: 2;
                    height: 100%;
                    width: 100%;
                    position: absolute;
                    top: 0;
                    left: 0;
                    padding: 0 1rem;
                    box-sizing: border-box;
                    .name {
                        margin-top: 0.2rem;
                        width: 100%;
                        text-align: center;
                        color: #f6aa60;
                        font-size: 0.8rem;
                    }
                    .button {
                        display: flex;
                        justify-content: space-between;
                        .button_btn {
                            width: 4rem;
                            background-color: #e5495f;
                            font-size: 0.8rem;
                            padding: 0.2rem 0.4rem;
                            border-radius: 0.5rem;
                            text-align: center;
                            color: #fff;
                        }
                    }
                }
            }
        }
    }
}
</style>

<template>
    <view class="view_1">
        <!-- 时间筛选 -S -->
        <view class="time_box">
            <view class="list" v-for="(item, index) in state.timeList" :key="index" :class="state.timeListindex == index ? 'listactive' : ''" @click="handelTimeListtab(item, index)">
                {{ item.name }}
            </view>
        </view>
        <!-- 时间筛选 -E -->
        <!-- navflters -S-->
        <view class="navflters">
            <view class="left">
                <image src="../../static/images/index/inputIcon.png" mode="widthFix" />
                <view class="text">全部剧场</view>
                <u-icon name="arrow-down-fill" size="24" color="#c0c4cc"></u-icon>
            </view>
            <view class="right">
                <u-subsection :list="state.subsectionlist" bg-color="#FFFFFF" active-color="#FFFFFF" inactive-color="#666666" :current="state.swiperCurrent" :button-color="'#FA924D'" @change="handelSubsection"></u-subsection>
            </view>
        </view>
        <!-- navflters -E-->
        <!-- viewtabs -S -->
        <swiper :current="state.swiperCurrent" class="swiperbox" @animationfinish="animationfinish">
            <swiper-item class="swiperA">
                <view class="top">
                    <image src="../../static/images/data/create.png" mode="widthFix" class="image" />
                    <view class="swiperA_content">
                        <view class="name">团长</view>
                        <view class="button">
                            <view></view>
                            <view class="button_btn">提现</view>
                        </view>
                        <view class="footer">
                            <view class="title">
                                <image src="../../static/images/data/income.png" mode="widthFix" />
                                <view>充值金额</view>
                            </view>
                            <view class="footer_list">
                                <view class="left">
                                    <view class="div">
                                        <view class="a">
                                            <view class="num">0</view>
                                            <view class="text">支付订单</view>
                                        </view>
                                        <view class="b">
                                            <view class="num">0</view>
                                            <view class="text">退款订单</view>
                                        </view>
                                    </view>
                                </view>
                                <view class="right">
                                    <view class="div">
                                        <view class="a">
                                            <view class="num">0</view>
                                            <view class="text">充值金额</view>
                                        </view>
                                        <view class="b">
                                            <view class="num">0</view>
                                            <view class="text">预估收益</view>
                                        </view>
                                    </view>
                                </view>
                            </view>
                            <view class="title">
                                <image src="../../static/images/data/income.png" mode="widthFix" />
                                <view>充值金额</view>
                            </view>
                            <view class="footer_list1">
                                <view class="left">
                                    <view class="num">0</view>
                                    <view class="text">退款订单</view>
                                </view>
                                <view class="center">
                                    <view class="num">0</view>
                                    <view class="text">退款订单</view>
                                </view>
                                <view class="right">
                                    <view class="num">0</view>
                                    <view class="text">退款订单</view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </swiper-item>
            <swiper-item class="swiperB">
                <view class="top">
                    <image src="../../static/images/data/divide.png" mode="widthFix" class="image" />
                    <view class="swiperB_content">
                        <view class="name">团长</view>
                        <view class="button">
                            <view></view>
                            <view class="button_btn">提现</view>
                        </view>
                    </view>
                </view>
            </swiper-item>
        </swiper>
        <!-- viewtabs -E -->
    </view>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
const state = reactive<{
    timeList: Array;
    timeListindex: number;
    subsectionlist: Array;
    swiperCurrent: number;
}>({
    swiperCurrent: 0,
    subsectionlist: [
        {
            name: "创作",
        },
        {
            name: "分成",
        },
    ],
    timeListindex: 0,
    timeList: [
        {
            name: "今天",
            time_type: 1,
        },
        {
            name: "昨天",
            time_type: 2,
        },
        {
            name: "近一周",
            time_type: 3,
        },
        {
            name: "近一月",
            time_type: 4,
        },
        {
            name: "本月",
            time_type: 5,
        },
        {
            name: "上月",
            time_type: 6,
        },
    ],
});
onLoad(() => {
    console.log("onLoad");
});
onShow(() => {
    console.log("onShow");
});
// 时间筛选
const handelTimeListtab = (item, index) => {
    state.timeListindex = index;
};
// navflters 切换
const handelSubsection = (val) => {
    state.swiperCurrent = val;
};
const animationfinish = (e) => {
    state.swiperCurrent = e.detail.current;
};
</script>
